ui-view[data-type="waypoint_toolbar"] {
	display: none;
}

ui-view[data-type="waypoint_toolbar"][data-show="true"] {
	display: flex;
}

ui-view[data-name="waypoint_toolbar"] ui-menu {
	z-index: 100;
}

ui-view[data-name="waypoint_toolbar"] ui-menu ul {
	z-index: 1500;
}

ui-view[data-name="waypoint_toolbar"] ui-menu ui-menu {
	margin-top: 5px;
	z-index: 50;
}

ui-view[data-name="waypoint_toolbar"] ui-menu ui-menu ul {
	z-index: 500;
}

@keyframes MoveBackground {
	0% {
		background-position: 0% 0%, 0% 0%;
	}
	
	50% {
		background-position: 0% 0%, 100% 0%;
	}
	
	100% {
		background-position: 0% 0%, 0% 0%;
	}
}

@keyframes Blink {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

ui-view[data-name="waypoint_toolbar"] ui-menu ul.main li a {
	display: flex;
}

ui-view[data-name="waypoint_toolbar"] ui-menu ul.main a span {
	flex: 1 auto;
}

ui-view[data-name="waypoint_toolbar"] ui-menu ul.main i[data-name] {
	flex: 0 auto;
}

ui-view[data-name="waypoint_toolbar"] ui-box {
	position: absolute;
	left: 10px;
	top: 50px;
	width: 256px;
	height: 128px;
	opacity: 0.6;
	padding: 20px;
	color: #FBFDFE;
	text-shadow: 0 0 5px rgb(140 204 240 / 80%), 0 0 5px rgb(39 164 236 / 80%);
}

ui-view[data-name="waypoint_toolbar"] ui-box {
	will-change: background-position;
	background: url('../../../assets/bgContainerBox.png#176,176,176,0.6'), url('../../../assets/bgContainer.png#180,228,249,0.8');
	background-size: 100% 100%, 100% 100%;
	background-position: 0% 0%, 100% 0%;

}

ui-view[data-name="waypoint_toolbar"] ui-box[data-color="red"] {
	will-change: background-position;
	background: url('../../../assets/bgContainerBox.png#176,176,176,0.6'), url('../../../assets/bgContainer.png#255,138,138,0.8');
	background-size: 100% 100%, 100% 100%;
	background-position: 0% 0%, 100% 0%;
}

ui-view[data-name="waypoint_toolbar"] ui-box[data-name="record"] {
	display: none;
	top: 170px;	
	height: 40px;
	padding: 10px;
	padding-left: 40px;
	line-height: 18px;
}

ui-view[data-name="waypoint_toolbar"] ui-box[data-name="record"][data-show="true"] {
	display: block;
}

ui-view[data-name="waypoint_toolbar"] ui-box[data-name="record"]:before {
	content: "";
	display: inline-block;
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	background-size: contain;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	opacity: 1;
	animation: Blink 0.5s ease-in-out infinite;
	background-image: url('../../../assets/stop.svg');
}

ui-view[data-name="waypoint_toolbar"] ui-box[data-name="info"] {
	
}

ui-view[data-name="waypoint_toolbar"] ui-box[data-name="info"] ui-entry {
	display: flex;
	flex-direction: row;
}

ui-view[data-name="waypoint_toolbar"] ui-box[data-name="info"] ui-entry label {
	flex: 1 auto;
	align-self: center;
}

ui-view[data-name="waypoint_toolbar"] ui-box[data-name="info"] ui-entry ui-value {
	flex: 0 auto;
	display: block;
	min-width: 60px;
	max-width: 60px;
	text-align: center;
}

ui-view[data-name="waypoint_toolbar"] ui-box[data-name="info"] ui-entry ui-value[data-prefix]:after {
	content: attr(data-prefix);
}

ui-view[data-name="waypoint_toolbar"] ui-box[data-name="info"] ui-entry ui-container {
	flex: 1 auto;
	display: flex;
	flex-direction: row;
	font-weight: 900;
	max-width: 60px;
}

ui-view[data-name="waypoint_toolbar"] ui-box[data-name="info"] ui-entry ui-container ui-arrow {
	flex: 0 13px;
	cursor: pointer;
	font-size: 22px;
	align-self: center;
}

ui-view[data-name="waypoint_toolbar"] ui-box[data-name="info"] ui-entry ui-container ui-arrow[data-direction="left"]:before {
	content: "❰";
}

ui-view[data-name="waypoint_toolbar"] ui-box[data-name="info"] ui-entry ui-container ui-arrow[data-direction="right"]:after {
	content: "❱";
}

ui-view[data-name="waypoint_toolbar"] ui-box[data-name="info"] ui-entry ui-container input {
	border: none;
	align-self: center;
	width:100%;
	flex: 0 170px;
	min-width: 1px;
	max-width: 100%;
	background: rgba(0, 0, 0, 0);
	text-align: center;
	color: var(--color_text);
	font-weight: 900;
	font-size: 16px;
	margin: 1px 0;
	text-shadow: 0 0 6px var(--color_text_shadow);
}

ui-view[data-name="waypoint_toolbar"] ui-box[data-name="info"] ui-entry ui-container input[type="number"]::-webkit-outer-spin-button,
ui-view[data-name="waypoint_toolbar"] ui-box[data-name="info"] ui-entry ui-container input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
}